<template>
    <div>
        <el-table :data="tableData" style="width: 80%; margin-left: 10%; margin-top: 5%;"
            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
            :row-class-name="tableRowClassName" @row-click="onRowClick">
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="售价（元）">
            </el-table-column>
            <el-table-column prop="stock" label="剩余数量">
            </el-table-column>
            <el-table-column label="购买数量">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.num"
                        @change="handleChange(scope.row.num, scope.row.index, scope.row.price, scope.row.id)" :min=" 0"
                        :max="scope.row.stock">
                    </el-input-number>
                </template>
            </el-table-column>
        </el-table>
        <div class="title">
            <span style="float: left">
                总计有&nbsp;&nbsp;{{ orderForm.count }}&nbsp;&nbsp;件商品，共计&nbsp;&nbsp;{{ orderForm.total }}&nbsp;&nbsp;元
            </span>
            <el-button type="primary" style="float: right" @click="check()">提交订单</el-button>
        </div>

        <el-dialog title="提交订单" :visible.sync="orderDialogForm" :append-to-body="true" :close-on-click-modal="false"
            width="370px">
            <el-form :model="orderForm" ref="orderForm" :rules="rules">
                <el-form-item label="总数量" :label-width="formLabelWidth">
                    <el-input v-model="orderForm.count" autocomplete="off" disabled=true></el-input>
                </el-form-item>
                <el-form-item label="总金额" :label-width="formLabelWidth">
                    <el-input v-model="orderForm.total" autocomplete="off" disabled=true></el-input>
                </el-form-item>
                <el-form-item label="申请人" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="orderForm.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="orderDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="addOrder()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            sum1: [],
            sum2: [],
            orderDialogForm: false,
            formLabelWidth: '80px',
            orderForm: {
                count: 0,
                total: 0,
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '申请人不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getGoodsList() {
            this.$axios.get('goods/shopcar').then(res => {
                if (res.data.code === 200) {
                    this.tableData = res.data.data
                    this.sum1 = new Array(this.tableData.length).fill(0)
                    this.sum2 = new Array(this.tableData.length).fill(0)
                }
            })
        },
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex;
        },
        onRowClick(row, event, column) {
            const index = row.index;
        },
        handleChange(value,index,price,id) {
            this.sum1[index] = value
            this.sum2[index] = value * price
            this.orderForm.count = 0
            this.orderForm.total = 0
            var obj = new Object()
            for (var i = 0;i < this.sum1.length;i++) {
                this.orderForm.count += this.sum1[i]
            }

            for (var i = 0;i < this.sum2.length;i++) {
                this.orderForm.total += this.sum2[i]
            }
        },
        check() {
            if (this.orderForm.count == 0 || this.orderForm.total == 0) {
                this.$message.error('请先添加商品')
            } else {
                this.orderDialogForm = true
                console.log(this.tableData)
            }
        },
        addOrder() {
            this.$axios.post('order/add', this.orderForm).then(res => {
                if (res.data.code === 200) {
                    this.$axios.post('goods/batch_update',this.tableData).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message)
                            this.orderDialogForm = false
                            this.getGoodsList()
                            this.orderForm.count = 0
                            this.orderForm.total = 0
                            this.orderForm.name = ''
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        }
    },
    created() {
        this.getGoodsList()
    }
}
</script>

<style scoped>
.form {
    display: flex;
    justify-content: center;
}

.title {
    margin-top: 2%;
    margin-left: 10%;
    width: 74%;
    height: 50px;
}

span {
    font-size: 20px;
}
</style>
